<!-- 蓝色简洁登录页面 -->
<template>
  <view class="t-login">
        <!-- 页面装饰图片 -->
    <image class="img-a" src="/static/img/b-1.jpg"></image>
    <image class="img-b" src="/static/img/b-2.png"></image>
        <!-- 标题 -->
        <view class="t-b">{{ title }}</view>
        <view class="t-b2">{{ subTitle }}</view>
        <form class="cl">
            <!-- 登录账号 -->
            <view class="login-form-item">
                <up-input v-model="username" placeholder="请输入登录用户名" maxlength="30">
                    <!-- 具名插槽 slot="prefix" 表示这个 up-icon 组件被用作父组件中某个特定插槽（这里是名为 prefix 的插槽）的内容。 -->
                    <template #prefix>
						<up-icon name="account" size="35px"></up-icon>
					</template>
                </up-input>
            </view>
            <!-- 登录密码 -->
            <view class="login-form-item">
                <up-input v-model="password" type="password" placeholder="请输入登录密码" maxlength="16">
                    <template #prefix>
                    	<up-icon name="lock" size="35px"></up-icon>
                    </template>
                </up-input>
            </view>
            <!-- 图形验证码 -->
            <view class="login-form-item t-captcha">
                <up-input v-model="captchaCode" type="number" placeholder="请输入验证码" maxlength="4">
                    <template #prefix>
                    	<up-icon sname="fingerprint" size="35px"></up-icon>
                    </template>
                </up-input>
                <image :src="captcha" @click="getCaptcha" class="t-captcha-img"></image>
            </view>
            <button @tap="login()">登 录</button>
        </form>
  </view>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { image } from '@/api/captcha';
import { isEmpty } from '@/utils/verify';
import { useStore } from 'vuex'; // 引入 useStore 函数

const title = ref('“寐梦成真”智慧助眠');
const subTitle = ref('聚焦睡眠健康管理，构建集睡眠监测、智能交互、个性化助眠于一体的轻量化解决方案');
// 图形验证码信息
const captcha = ref<string | null>(null);
// 登录账号
const username = ref('testuser');
// 密码
const password = ref('admin123');
// 图形验证码
const captchaCode = ref('');
const uuid = ref('');
const isLoading = ref(false);
const store = useStore(); // 使用 useStore 函数获取 store 实例

const getCaptcha = async () => {
  try {
    const result = await image();
    captcha.value = 'data:image/gif;base64,' + result.img;
    uuid.value = result.uuid;
  } catch (error) {
    console.error('获取验证码失败:', error);
  }
};

const validItem = () => {
  if (isEmpty(username.value)) {
    uni.showToast({title:'请输入登录用户名'});
    return false;
  }
  if (isEmpty(password.value)) {
    uni.showToast({title:'请输入登录密码'});
    return false;
  }
  if (isEmpty(captchaCode.value)) {
    uni.showToast({title:'请输入验证码'});
    return false;
  }
  return true;
};

const login = async () => {
  const valid = validItem();
  if (valid) {
    isLoading.value = true;
    try {
      await store.dispatch('Login', {
        username: username.value,
        password: password.value,
        code: captchaCode.value,
        uuid: uuid.value
      });
      uni.switchTab({
        url: '/pages/index/index',
        fail(err) {
          console.log(err);
        }
      });
    } catch (err) {
      captchaCode.value = '';
      getCaptcha();
    } finally {
      isLoading.value = false;
    }
  }
};

// 页面加载时获取验证码，保持 onMounted 不变
onMounted(() => {
  getCaptcha();
});
</script>
<style lang="scss" scoped>
@import 'index.scss';
</style>